<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>智能洗护中心(北京路店) - 洗头机器人服务平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#35C2C1',
                        secondary: '#FF7D00',
                        dark: '#333333',
                        light: '#F5F5F5',
                        gray: '#999999',
                        lightgray: '#EEEEEE'
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .wx-shadow {
                box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
            }
            .nav-active {
                color: #35C2C1;
            }
            .service-active {
                border-color: #35C2C1;
                background-color: rgba(53, 194, 193, 0.05);
            }
            .stylist-active {
                border-color: #35C2C1;
                background-color: rgba(53, 194, 193, 0.05);
            }
            .option-active {
                background-color: #35C2C1;
                color: white;
            }
            .date-active {
                border-color: #35C2C1;
                background-color: rgba(53, 194, 193, 0.1);
            }
            .time-slot {
                border: 1px solid #ddd;
                padding: 8px 0;
                border-radius: 4px;
                text-align: center;
                cursor: pointer;
                transition: all 0.2s;
            }
            .time-slot:hover:not(.time-slot-disabled) {
                border-color: #35C2C1;
            }
            .time-slot-selected {
                background-color: #35C2C1;
                color: white;
                border-color: #35C2C1;
            }
            .time-slot-disabled {
                background-color: #f1f1f1;
                color: #999;
                cursor: not-allowed;
                border-color: #eee;
            }
            .portfolio-img {
                transition: transform 0.3s ease;
            }
            .portfolio-img:hover {
                transform: scale(1.05);
            }
        }
    </style>
</head>
<body class="bg-light font-sans text-dark min-h-screen">
    <!-- 小程序容器 -->
    <div class="max-w-md mx-auto bg-white min-h-screen relative">
        <!-- 顶部导航栏 -->
        <header class="bg-white text-dark py-4 px-5 flex justify-between items-center fixed top-0 left-0 right-0 max-w-md mx-auto z-10 border-b border-lightgray">
            <a href="index.html" class="text-dark">
                <i class="fa fa-arrow-left text-lg"></i>
            </a>
            <div class="text-lg font-bold">门店详情</div>
            <div class="flex space-x-4">
                <i class="fa fa-share-alt text-lg"></i>
                <i class="fa fa-heart-o text-lg"></i>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="pt-16 pb-36"> <!-- 增加底部内边距，为预约区域留出空间 -->
            <!-- 门店图片轮播 -->
            <div class="relative h-56 bg-gray-200 overflow-hidden">
                <img src="https://picsum.photos/800/500?random=10" alt="智能洗护中心门店环境" class="w-full h-full object-cover">
                <div class="absolute bottom-3 right-3 bg-black/50 text-white text-xs px-2 py-1 rounded">
                    1/5
                </div>
            </div>

            <!-- 门店基本信息 -->
            <div class="p-5 bg-white">
                <div class="flex justify-between items-start">
                    <div>
                        <h1 class="text-xl font-bold">智能洗护中心(北京路店)</h1>
                       
                    </div>
                    <button class="bg-primary/10 text-primary text-sm px-3 py-1 rounded flex items-center">
                        <i class="fa fa-map-marker mr-1"></i> 导航
                    </button>
                </div>

                <div class="mt-3 grid grid-cols-2 gap-3 text-sm">
                    <div class="flex items-start">
                        <i class="fa fa-map-marker text-primary mt-1 mr-2"></i>
                        <div>
                            <p class="text-gray">地址</p>
                            <p class="mt-1">广州市越秀区北京路123号</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <i class="fa fa-clock-o text-primary mt-1 mr-2"></i>
                        <div>
                            <p class="text-gray">营业时间</p>
                            <p class="mt-1">09:00-22:00</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <i class="fa fa-phone text-primary mt-1 mr-2"></i>
                        <div>
                            <p class="text-gray">电话</p>
                            <p class="mt-1">020-12345678</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <i class="fa fa-car text-primary mt-1 mr-2"></i>
                        <div>
                            <p class="text-gray">停车信息</p>
                            <p class="mt-1">周边有收费停车场</p>
                        </div>
                    </div>
                </div>

                <div class="mt-4 pt-4 border-t border-lightgray">
                    <h2 class="font-bold mb-3">门店介绍</h2>
                    <p class="text-gray text-sm leading-relaxed">
                        智能洗护中心(北京路店)是本市首家全智能洗头体验店，配备5台最新一代AI洗头机器人，
                        提供专业的头皮检测、智能洗护、头皮护理等服务。店内环境舒适，采用无菌操作标准，
                        所有工具均经过严格消毒，让您安心享受科技带来的全新洗护体验。
                    </p>
                </div>
            </div>

            <!-- 服务项目 - 固定展示，由店铺维护 -->
            <div class="p-5 bg-white mt-2">
                <h2 class="text-lg font-bold mb-4">服务项目</h2>
                
                <div class="space-y-3">
                    <!-- 服务1 - 基础洗头 -->
                    <div class="service-item flex justify-between items-center p-3 border border-lightgray rounded-lg cursor-pointer transition-all" data-id="basic-wash" data-name="AI智能基础洗头" data-price="39">
                        <div>
                            <h3 class="font-medium">AI智能基础洗头</h3>
                            <p class="text-gray text-xs mt-1">30分钟 · 含头皮检测+智能洗护+吹干</p>
                        </div>
                        <div class="text-right">
                            <p class="text-secondary font-medium">¥39</p>
                            <span class="text-primary text-xs mt-1 block">选择</span>
                        </div>
                    </div>
                    
                    <!-- 服务2 - 深层清洁 -->
                    <div class="service-item flex justify-between items-center p-3 border border-lightgray rounded-lg cursor-pointer transition-all" data-id="deep-clean" data-name="深层清洁头皮护理" data-price="69">
                        <div>
                            <h3 class="font-medium">深层清洁头皮护理</h3>
                            <p class="text-gray text-xs mt-1">45分钟 · 含深层清洁+精华导入</p>
                        </div>
                        <div class="text-right">
                            <p class="text-secondary font-medium">¥69</p>
                            <span class="text-primary text-xs mt-1 block">选择</span>
                        </div>
                    </div>
                    
                    <!-- 服务3 - 染发护理 -->
                    <div class="service-item flex justify-between items-center p-3 border border-lightgray rounded-lg cursor-pointer transition-all" data-id="dye-care" data-name="染发后护理套餐" data-price="99">
                        <div>
                            <h3 class="font-medium">染发后护理套餐</h3>
                            <p class="text-gray text-xs mt-1">60分钟 · 含护色护理+锁水精华</p>
                        </div>
                        <div class="text-right">
                            <p class="text-secondary font-medium">¥99</p>
                            <span class="text-primary text-xs mt-1 block">选择</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 发型师选择 - 默认隐藏，选择需要剪发后显示 -->
            <div class="p-5 bg-white mt-2 hidden" id="stylistSection">
                <h2 class="text-lg font-bold mb-4">选择剪发发型师</h2>
                
                <div class="space-y-3">
                    <!-- 发型师1 -->
                    <div class="stylist-item flex justify-between items-center p-3 border border-lightgray rounded-lg cursor-pointer transition-all" data-id="1" data-price="50">
                        <div class="flex items-center">
                            <img src="https://picsum.photos/80/80?random=30" alt="王发型师" class="w-14 h-14 rounded-full object-cover">
                            <div class="ml-3">
                                <h3 class="font-medium">王发型师</h3>
                                <p class="text-gray text-xs mt-0.5">5年经验 · 擅长男士短发</p>
                                <div class="flex items-center mt-1 text-xs">
                                    <span class="text-secondary">剪发价格: ¥50</span>
                                    <button class="text-primary ml-2 view-portfolio" data-id="1">查看作品集</button>
                                </div>
                            </div>
                        </div>
                        <i class="fa fa-check-circle-o text-primary hidden"></i>
                    </div>
                    
                    <!-- 发型师2 -->
                    <div class="stylist-item flex justify-between items-center p-3 border border-lightgray rounded-lg cursor-pointer transition-all" data-id="2" data-price="68">
                        <div class="flex items-center">
                            <img src="https://picsum.photos/80/80?random=31" alt="李发型师" class="w-14 h-14 rounded-full object-cover">
                            <div class="ml-3">
                                <h3 class="font-medium">李发型师</h3>
                                <p class="text-gray text-xs mt-0.5">8年经验 · 擅长女士造型</p>
                                <div class="flex items-center mt-1 text-xs">
                                    <span class="text-secondary">剪发价格: ¥68</span>
                                    <button class="text-primary ml-2 view-portfolio" data-id="2">查看作品集</button>
                                </div>
                            </div>
                        </div>
                        <i class="fa fa-check-circle-o text-primary hidden"></i>
                    </div>
                    
                    <!-- 发型师3 -->
                    <div class="stylist-item flex justify-between items-center p-3 border border-lightgray rounded-lg cursor-pointer transition-all" data-id="3" data-price="88">
                        <div class="flex items-center">
                            <img src="https://picsum.photos/80/80?random=32" alt="张发型师" class="w-14 h-14 rounded-full object-cover">
                            <div class="ml-3">
                                <h3 class="font-medium">张发型师</h3>
                                <p class="text-gray text-xs mt-0.5">10年经验 · 资深造型总监</p>
                                <div class="flex items-center mt-1 text-xs">
                                    <span class="text-secondary">剪发价格: ¥88</span>
                                    <button class="text-primary ml-2 view-portfolio" data-id="3">查看作品集</button>
                                </div>
                            </div>
                        </div>
                        <i class="fa fa-check-circle-o text-primary hidden"></i>
                    </div>
                </div>
            </div>

            <!-- 预约时间选择 - 默认隐藏，完成前面选择后显示 -->
            <div class="p-5 bg-white mt-2 hidden" id="appointmentSection">
                <h2 class="text-lg font-bold mb-4">选择预约时间</h2>
                
                <!-- 日期选择 - 一周 -->
                <div class="mb-5">
                    <div class="flex overflow-x-auto pb-2 space-x-2" id="dateSelector">
                        <!-- 日期将通过JS动态生成 -->
                    </div>
                </div>
                
                <!-- 时间段选择 -->
                <div>
                    <p class="text-sm text-gray mb-3">可预约时段</p>
                    <div class="grid grid-cols-3 gap-2" id="timeSlots">
                        <!-- 时间段将通过JS动态生成 -->
                    </div>
                </div>
            </div>
        </main>

        <!-- 剪发选择区 -->
        <div class="fixed bottom-14 left-0 right-0 max-w-md mx-auto bg-white border-t border-lightgray py-3 px-5 hidden" id="haircutOption">
            <p class="text-sm mb-2">是否需要剪发服务？</p>
            <div class="flex space-x-4">
                <button class="flex-1 py-2 border border-lightgray rounded-lg text-sm option-active" id="needHaircut">
                    需要
                </button>
                <button class="flex-1 py-2 border border-lightgray rounded-lg text-sm" id="noHaircut">
                    不需要
                </button>
            </div>
        </div>

        <!-- 预约确认区 -->
        <div class="fixed bottom-14 left-0 right-0 max-w-md mx-auto bg-white border-t border-lightgray py-3 px-5 hidden" id="confirmOption">
            <div class="flex justify-between items-center mb-2">
                <div>
                    <p class="text-xs text-gray">已选时间</p>
                    <p class="text-sm font-medium selected-time">未选择时间</p>
                </div>
                <button class="text-primary text-sm" id="changeTimeBtn">
                    更改
                </button>
            </div>
            <button class="w-full bg-primary text-white py-2 rounded-lg font-medium" id="confirmAppointmentBtn">
                确认预约
            </button>
        </div>

        <!-- 底部预约栏 -->
        <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-lightgray py-3 px-5 flex justify-between items-center">
            <div>
                <p class="text-gray text-xs">当前选择</p>
                <p class="text-secondary font-bold selected-total">未选择服务</p>
            </div>
            <button class="bg-primary text-white px-8 py-2 rounded-full font-medium" id="bookNowBtn" disabled>
                请选择服务
            </button>
        </div>

        <!-- 底部导航 -->
        <footer class="fixed bottom-14 left-0 right-0 max-w-md mx-auto bg-white border-t border-lightgray py-2 px-8 hidden" id="mainFooter">
            <div class="flex justify-between">
                <a href="#" class="flex flex-col items-center text-gray">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="#" class="flex flex-col items-center nav-active">
                    <i class="fa fa-map-marker text-lg"></i>
                    <span class="text-xs mt-1">门店</span>
                </a>
                <a href="#" class="flex flex-col items-center text-gray">
                    <i class="fa fa-calendar text-lg"></i>
                    <span class="text-xs mt-1">预约</span>
                </a>
                <a href="#" class="flex flex-col items-center text-gray">
                    <i class="fa fa-user text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </footer>

        <!-- 发型师作品集模态框 -->
        <div id="portfolioModal" class="fixed inset-0 bg-black/70 z-50 hidden flex items-center justify-center p-4">
            <div class="bg-white rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden">
                <div class="p-4 border-b border-lightgray flex justify-between items-center">
                    <h3 class="font-bold" id="modalTitle">王发型师作品集</h3>
                    <button id="closeModal" class="text-gray">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <div class="p-4 overflow-y-auto max-h-[calc(80vh-5rem)]" id="portfolioContent">
                    <!-- 作品集内容将通过JS动态填充 -->
                </div>
            </div>
        </div>

        <!-- 预约成功提示框 -->
        <div id="successModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
            <div class="bg-white rounded-lg max-w-md w-full p-6 text-center">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-check text-2xl text-green-500"></i>
                </div>
                <h3 class="text-lg font-bold mb-2">预约成功</h3>
                <p class="text-gray text-sm mb-4" id="successMessage">
                    您的预约已成功提交，请按时到店体验
                </p>
                <button class="w-full bg-primary text-white py-2 rounded-lg font-medium" id="backToHomeBtn">
                    返回首页
                </button>
            </div>
        </div>
    </div>

    <script>
        // 机器人选择模块 
        <div id="robotSection" class="mt-6 px-5">
            <h3 class="text-lg font-bold mb-3">选择机器人</h3>
            <div class="grid grid-cols-3 gap-3">
                <div class="robot-item border rounded-lg p-3 text-center cursor-pointer" data-id="1" data-name="洗护机器人A">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fa fa-robot text-2xl text-blue-500"></i>
                    </div>
                    <p class="text-sm font-medium">洗护机器人A</p>
                    <p class="text-xs text-gray mt-1">空闲中</p>
                </div>
                <div class="robot-item border rounded-lg p-3 text-center cursor-pointer" data-id="2" data-name="洗护机器人B">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fa fa-robot text-2xl text-blue-500"></i>
                    </div>
                    <p class="text-sm font-medium">洗护机器人B</p>
                    <p class="text-xs text-gray mt-1">空闲中</p>
                </div>
                <div class="robot-item border rounded-lg p-3 text-center cursor-pointer" data-id="3" data-name="洗护机器人C">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fa fa-robot text-2xl text-blue-500"></i>
                    </div>
                    <p class="text-sm font-medium">洗护机器人C</p>
                    <p class="text-xs text-gray mt-1">空闲中</p>
                </div>
            </div>
        </div>

        // 存储发型师作品集数据
        const stylistPortfolios = {
            1: {
                name: "王发型师作品集",
                works: [
                    { title: "男士渐变短发", image: "https://picsum.photos/300/300?random=40" },
                    { title: "复古油头造型", image: "https://picsum.photos/300/300?random=41" },
                    { title: "潮流纹理烫", image: "https://picsum.photos/300/300?random=42" },
                    { title: "清爽板寸头", image: "https://picsum.photos/300/300?random=43" }
                ]
            },
            2: {
                name: "李发型师作品集",
                works: [
                    { title: "法式刘海", image: "https://picsum.photos/300/300?random=44" },
                    { title: "空气感短发", image: "https://picsum.photos/300/300?random=45" },
                    { title: "长卷发造型", image: "https://picsum.photos/300/300?random=46" },
                    { title: "高层次锁骨发", image: "https://picsum.photos/300/300?random=47" }
                ]
            },
            3: {
                name: "张发型师作品集",
                works: [
                    { title: "明星同款短发", image: "https://picsum.photos/300/300?random=48" },
                    { title: "精致Bob头", image: "https://picsum.photos/300/300?random=49" },
                    { title: "时尚挑染", image: "https://picsum.photos/300/300?random=50" },
                    { title: "复古羊毛卷", image: "https://picsum.photos/300/300?random=51" },
                    { title: "商务男士发型", image: "https://picsum.photos/300/300?random=52" }
                ]
            }
        };
        
        // 模拟已预约的时间段数据
        const bookedTimeSlots = {
            // 格式: 日期字符串 -> 时间段数组
            "2023-11-15": ["10:00", "14:00", "16:00", "19:00"],
            "2023-11-16": ["09:00", "11:00", "15:00", "17:00", "20:00"],
            "2023-11-17": ["13:00", "14:00", "18:00"]
        };
        
        let selectedService = null;
        let needHaircut = false;
        let selectedStylistId = null;
        let selectedDate = null;
        let selectedTime = null;
        let selectedRobotId = null; // 新增：选中的机器人ID
        
        // 初始化日期选择器
        function initDateSelector() {
            const dateSelector = document.getElementById('dateSelector');
            const today = new Date();
            
            // 生成未来7天的日期
            for (let i = 0; i < 7; i++) {
                const date = new Date(today);
                date.setDate(today.getDate() + i);
                
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                const weekDay = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()];
                
                // 格式化日期为YYYY-MM-DD
                const dateStr = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
                // 显示用的日期格式
                const displayDate = `${month}月${day}日`;
                
                const dateItem = document.createElement('div');
                dateItem.className = `flex-shrink-0 flex flex-col items-center justify-center w-16 h-20 border rounded-lg ${i === 0 ? 'date-active' : ''}`;
                dateItem.setAttribute('data-date', dateStr);
                
                dateItem.innerHTML = `
                    <span class="text-xs ${i === 0 ? 'text-primary font-medium' : 'text-gray'}">${i === 0 ? '今天' : `周${weekDay}`}</span>
                    <span class="text-lg font-bold mt-1">${day}</span>
                    <span class="text-xs text-gray mt-1">${month}月</span>
                `;
                
                dateItem.addEventListener('click', function() {
                    // 更新选中状态
                    document.querySelectorAll('#dateSelector > div').forEach(el => {
                        el.classList.remove('date-active');
                    });
                    this.classList.add('date-active');
                    
                    // 更新选中日期
                    selectedDate = this.getAttribute('data-date');
                    
                    // 生成对应日期的时间段
                    generateTimeSlots(selectedDate);
                });
                
                dateSelector.appendChild(dateItem);
                
                // 默认选中今天
                if (i === 0) {
                    selectedDate = dateStr;
                    generateTimeSlots(selectedDate);
                }
            }
        }
        
        // 生成时间段
        function generateTimeSlots(date) {
            const timeSlots = document.getElementById('timeSlots');
            timeSlots.innerHTML = '';
            
            // 营业时间: 09:00-22:00，每小时一个时段
            const startHour = 9;
            const endHour = 21; // 最后一个时段是21:00
            
            // 获取该日期已预约的时段
            const bookedSlots = bookedTimeSlots[date] || [];
            
            for (let hour = startHour; hour <= endHour; hour++) {
                const timeStr = `${hour.toString().padStart(2, '0')}:00`;
                const isBooked = bookedSlots.includes(timeStr);
                
                const timeSlot = document.createElement('div');
                timeSlot.className = `time-slot ${isBooked ? 'time-slot-disabled' : ''}`;
                timeSlot.textContent = timeStr;
                
                if (!isBooked) {
                    timeSlot.addEventListener('click', function() {
                        // 更新选中状态
                        document.querySelectorAll('.time-slot').forEach(el => {
                            el.classList.remove('time-slot-selected');
                        });
                        this.classList.add('time-slot-selected');
                        
                        // 更新选中时间
                        selectedTime = timeStr;
                        
                        // 更新确认区时间显示
                        updateSelectedTimeDisplay();
                    });
                }
                
                timeSlots.appendChild(timeSlot);
            }
        }
        
        // 更新选中时间显示
        function updateSelectedTimeDisplay() {
            if (selectedDate && selectedTime) {
                // 格式化显示日期
                const dateParts = selectedDate.split('-');
                const displayDate = `${dateParts[1]}月${dateParts[2]}日`;
                document.querySelector('.selected-time').textContent = `${displayDate} ${selectedTime}`;
            }
        }
        
        // 服务项目选择交互
        document.querySelectorAll('.service-item').forEach(item => {
            item.addEventListener('click', function() {
                // 移除其他选中状态
                document.querySelectorAll('.service-item').forEach(el => {
                    el.classList.remove('service-active');
                });
                
                // 设置当前选中状态
                this.classList.add('service-active');
                
                // 更新选中的服务
                selectedService = {
                    id: this.getAttribute('data-id'),
                    name: this.getAttribute('data-name'),
                    price: parseInt(this.getAttribute('data-price'))
                };
                
                // 显示剪发选择区，隐藏其他底部区域
                document.getElementById('haircutOption').classList.remove('hidden');
                document.getElementById('confirmOption').classList.add('hidden');
                document.getElementById('mainFooter').classList.add('hidden');
                document.getElementById('appointmentSection').classList.add('hidden');
                
                // 重置其他选择
                resetHaircutSelection();
                resetStylistSelection();
                resetRobotSelection();
                
                // 隐藏相关区域
                document.getElementById('stylistSection').classList.add('hidden');
                document.getElementById('robotSection').classList.add('hidden');
                
                // 更新总价
                updateTotalPrice();
            });
        });
        
        // 剪发选择交互
        document.getElementById('needHaircut').addEventListener('click', function() {
            needHaircut = true;
            this.classList.add('option-active');
            document.getElementById('noHaircut').classList.remove('option-active');
            
            // 显示发型师选择区，隐藏机器人选择区
            document.getElementById('stylistSection').classList.remove('hidden');
            document.getElementById('robotSection').classList.add('hidden');
            
            // 重置选择
            resetStylistSelection();
            resetRobotSelection();
            
            // 隐藏预约时间选择
            document.getElementById('appointmentSection').classList.add('hidden');
            
            // 更新总价
            updateTotalPrice();
        });
        
        document.getElementById('noHaircut').addEventListener('click', function() {
            needHaircut = false;
            this.classList.add('option-active');
            document.getElementById('needHaircut').classList.remove('option-active');
            
            // 隐藏发型师选择区，显示机器人选择区
            document.getElementById('stylistSection').classList.add('hidden');
            document.getElementById('robotSection').classList.remove('hidden');
            
            // 重置选择
            resetStylistSelection();
            
            // 隐藏预约时间选择
            document.getElementById('appointmentSection').classList.add('hidden');
            
            // 更新总价
            updateTotalPrice();
            
            // 更新底部按钮
            document.getElementById('bookNowBtn').disabled = !selectedRobotId;
            document.getElementById('bookNowBtn').textContent = selectedRobotId ? '选择时间' : '请选择机器人';
        });
        
        // 机器人选择交互
        document.querySelectorAll('.robot-item').forEach(item => {
            item.addEventListener('click', function() {
                // 移除其他选中状态
                document.querySelectorAll('.robot-item').forEach(el => {
                    el.classList.remove('robot-active');
                    el.querySelector('div').classList.remove('bg-primary');
                    el.querySelector('i').classList.remove('text-white');
                    el.querySelector('div').classList.add('bg-blue-100');
                    el.querySelector('i').classList.add('text-blue-500');
                });
                
                // 设置当前选中状态
                this.classList.add('robot-active');
                this.querySelector('div').classList.remove('bg-blue-100');
                this.querySelector('div').classList.add('bg-primary');
                this.querySelector('i').classList.remove('text-blue-500');
                this.querySelector('i').classList.add('text-white');
                
                // 更新选中的机器人ID
                selectedRobotId = this.getAttribute('data-id');
                
                // 显示预约时间选择
                document.getElementById('appointmentSection').classList.remove('hidden');
                
                // 重新生成时间段，考虑机器人预约情况
                if (selectedDate) {
                    generateTimeSlots(selectedDate);
                }
                
                // 更新底部按钮
                document.getElementById('bookNowBtn').disabled = false;
                document.getElementById('bookNowBtn').textContent = '选择时间';
            });
        });
        
        // 发型师选择交互
        document.querySelectorAll('.stylist-item').forEach(item => {
            item.addEventListener('click', function() {
                // 移除其他选中状态
                document.querySelectorAll('.stylist-item').forEach(el => {
                    el.classList.remove('stylist-active');
                    el.querySelector('.fa-check-circle-o').classList.add('hidden');
                });
                
                // 设置当前选中状态
                this.classList.add('stylist-active');
                this.querySelector('.fa-check-circle-o').classList.remove('hidden');
                
                // 更新选中的发型师ID和价格
                selectedStylistId = this.getAttribute('data-id');
                
                // 显示预约时间选择
                document.getElementById('appointmentSection').classList.remove('hidden');
                
                // 重新生成时间段，考虑发型师预约情况
                if (selectedDate) {
                    generateTimeSlots(selectedDate);
                }
                
                // 更新总价
                updateTotalPrice();
                
                // 更新底部按钮
                document.getElementById('bookNowBtn').disabled = false;
                document.getElementById('bookNowBtn').textContent = '选择时间';
            });
        });
        
        // 查看作品集
        document.querySelectorAll('.view-portfolio').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation(); // 防止触发发型师选择
                const stylistId = this.getAttribute('data-id');
                const portfolio = stylistPortfolios[stylistId];
                
                // 填充模态框内容
                document.getElementById('modalTitle').textContent = portfolio.name;
                
                let portfolioHTML = '<div class="grid grid-cols-2 gap-2">';
                portfolio.works.forEach(work => {
                    portfolioHTML += `
                        <div class="mb-2">
                            <img src="${work.image}" alt="${work.title}" class="w-full h-32 object-cover rounded portfolio-img">
                            <p class="text-xs text-center mt-1">${work.title}</p>
                        </div>
                    `;
                });
                portfolioHTML += '</div>';
                
                document.getElementById('portfolioContent').innerHTML = portfolioHTML;
                
                // 显示模态框
                document.getElementById('portfolioModal').classList.remove('hidden');
            });
        });
        
        // 关闭作品集模态框
        document.getElementById('closeModal').addEventListener('click', function() {
            document.getElementById('portfolioModal').classList.add('hidden');
        });
        
        // 点击模态框外部关闭
        document.getElementById('portfolioModal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.classList.add('hidden');
            }
        });
        
        // 底部预约按钮点击事件
        document.getElementById('bookNowBtn').addEventListener('click', function() {
            if (this.textContent === '选择时间' && selectedDate) {
                // 隐藏剪发选择，显示确认选择
                document.getElementById('haircutOption').classList.add('hidden');
                document.getElementById('confirmOption').classList.remove('hidden');
                
                // 默认选择第一个可用时段
                if (!selectedTime) {
                    const firstAvailableSlot = document.querySelector('.time-slot:not(.time-slot-disabled)');
                    if (firstAvailableSlot) {
                        firstAvailableSlot.click();
                    }
                }
            }
        });
        
        // 更改时间按钮点击事件
        document.getElementById('changeTimeBtn').addEventListener('click', function() {
            document.getElementById('confirmOption').classList.add('hidden');
            document.getElementById('haircutOption').classList.remove('hidden');
        });
        
        // 确认预约按钮点击事件
        document.getElementById('confirmAppointmentBtn').addEventListener('click', function() {
            if (!selectedDate || !selectedTime || (!needHaircut && !selectedRobotId) || (needHaircut && !selectedStylistId)) {
                alert('请选择完整的预约信息');
                return;
            }
            
            // 更新已预约时间段数据
            if (!bookedTimeSlots[selectedDate]) {
                bookedTimeSlots[selectedDate] = {
                    robots: {},
                    stylists: {}
                };
            }
            
            // 如果不需要剪发，记录机器人预约
            if (!needHaircut && selectedRobotId) {
                if (!bookedTimeSlots[selectedDate].robots[selectedRobotId]) {
                    bookedTimeSlots[selectedDate].robots[selectedRobotId] = [];
                }
                bookedTimeSlots[selectedDate].robots[selectedRobotId].push(selectedTime);
            }
            
            // 如果需要剪发，记录发型师预约
            if (needHaircut && selectedStylistId) {
                if (!bookedTimeSlots[selectedDate].stylists[selectedStylistId]) {
                    bookedTimeSlots[selectedDate].stylists[selectedStylistId] = [];
                }
                bookedTimeSlots[selectedDate].stylists[selectedStylistId].push(selectedTime);
            }
            
            // 构建预约信息
            let appointmentInfo = `服务: ${selectedService.name}\n`;
            
            if (!needHaircut && selectedRobotId) {
                const robotName = document.querySelector(`.robot-item[data-id="${selectedRobotId}"] p:nth-child(2)`).textContent;
                appointmentInfo += `机器人: ${robotName}\n`;
            }
            
            if (needHaircut && selectedStylistId) {
                const stylistName = document.querySelector(`.stylist-item[data-id="${selectedStylistId}"] h3`).textContent;
                appointmentInfo += `发型师: ${stylistName}\n`;
            }
            
            appointmentInfo += `时间: ${selectedDate} ${selectedTime}\n`;
            appointmentInfo += `总价: ${document.querySelector('.selected-total').textContent}`;
            
            // 显示成功提示
            const successMessage = needHaircut 
                ? `您已成功预约${selectedService.name}，由${document.querySelector(`.stylist-item[data-id="${selectedStylistId}"] h3`).textContent}为您服务，时间为${selectedDate} ${selectedTime}，请按时到店体验。`
                : `您已成功预约${selectedService.name}，将由${document.querySelector(`.robot-item[data-id="${selectedRobotId}"] p:nth-child(2)`).textContent}为您服务，时间为${selectedDate} ${selectedTime}，请按时到店体验。`;
            
            document.getElementById('successMessage').textContent = successMessage;
            document.getElementById('successModal').classList.remove('hidden');
        });
        
        // 返回首页按钮点击事件
        document.getElementById('backToHomeBtn').addEventListener('click', function() {
            document.getElementById('successModal').classList.add('hidden');
            // 这里可以添加返回首页的逻辑
            alert('返回首页');
        });
        
        // 更新总价
        function updateTotalPrice() {
            const totalElement = document.querySelector('.selected-total');
            const bookBtn = document.getElementById('bookNowBtn');
            
            if (!selectedService) {
                totalElement.textContent = '未选择服务';
                bookBtn.disabled = true;
                bookBtn.textContent = '请选择服务';
                return;
            }
            
            // 基础价格
            let totalPrice = selectedService.price;
            
            // 如果需要剪发且已选择发型师，加上剪发价格
            if (needHaircut && selectedStylistId) {
                const stylistPrice = parseInt(document.querySelector(`.stylist-item[data-id="${selectedStylistId}"]`).getAttribute('data-price'));
                totalPrice += stylistPrice;
                totalElement.textContent = `¥${totalPrice}`;
                bookBtn.disabled = false;
                bookBtn.textContent = '选择时间';
            } 
            // 如果需要剪发但未选择发型师
            else if (needHaircut) {
                totalElement.textContent = `${selectedService.price}+剪发价格`;
                bookBtn.disabled = true;
                bookBtn.textContent = '请选择发型师';
            } 
            // 不需要剪发的服务，需要选择机器人
            else {
                totalElement.textContent = `¥${totalPrice}`;
                bookBtn.disabled = !selectedRobotId;
                bookBtn.textContent = selectedRobotId ? '选择时间' : '请选择机器人';
            }
        }
        
        // 重置剪发选择
        function resetHaircutSelection() {
            needHaircut = false;
            document.getElementById('needHaircut').classList.add('option-active');
            document.getElementById('noHaircut').classList.remove('option-active');
        }
        
        // 重置发型师选择
        function resetStylistSelection() {
            document.querySelectorAll('.stylist-item').forEach(el => {
                el.classList.remove('stylist-active');
                el.querySelector('.fa-check-circle-o').classList.add('hidden');
            });
            selectedStylistId = null;
        }
        
        // 新增：重置机器人选择
        function resetRobotSelection() {
            document.querySelectorAll('.robot-item').forEach(el => {
                el.classList.remove('robot-active');
                el.querySelector('div').classList.remove('bg-primary');
                el.querySelector('i').classList.remove('text-white');
                el.querySelector('div').classList.add('bg-blue-100');
                el.querySelector('i').classList.add('text-blue-500');
            });
            selectedRobotId = null;
        }
        
        // 底部导航交互
        document.querySelectorAll('footer a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelectorAll('footer a').forEach(el => {
                    el.classList.remove('nav-active');
                    el.classList.add('text-gray');
                });
                this.classList.add('nav-active');
                this.classList.remove('text-gray');
            });
        });
        
        // 页面加载完成后初始化日期选择器
        window.addEventListener('load', function() {
            initDateSelector();
        });
    </script>
</body>
</html>